*{
    margin: 0;
    padding: 0;
    text-decoration:none;
}
html,body{
    width: 100%;
    height: 100%;
    background: #f4f5f7;
}
section{
    
    header{
        height: 94px;
        width: 100%;
        display: flex;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        background: #fff;
        .logo{
            width: 130px;
            height: 48px;
            display: flex;
            margin-top: 25px;
            margin-left: 96px;
            img{
                width: 48px;
                height: 48px;
            }
            h1{
                width: 72px;
                height: 48px;
                margin-left: 10px;
                color: #000;
            }
            h1 p:nth-child(1){
                font-size: 24px;
            }
            h1 p:nth-child(2) {
                font-size: 12px;
            }
        }
        nav{
            margin-left: 480px;
            ul,
            li {
                list-style-type: none;
            }
            ul {
                display: flex;
                li {
                    height: 94px;
                    margin-right: 50px;
                    line-height: 94px;
                    a {
                        color: #676b6e;
                        text-decoration: none;
                        font-weight: 900;
                    }
                }
            }
        }
        .search{
            margin-right: 50px;
            margin-top: 25px;
            i {
                font-size: 25px;
                line-height: 48px;
            }
        }
        #login {
            margin-top: 25px;
            width: 108px;
            height: 48px;
            border-radius: 10px;
            background: #018ee8; 
        
        }
        }


        main{
            .container{
                width: 1000px;
                height: 100%;
                margin: auto;
                .con1{
                    width: 100%;
                    height: 290px;
                    margin-top: 94px;
                    // background: #0eeeee;
                    padding-top: 20px;
                    .type-one{
                        margin: 40px 0 20px;
                        h2{
                            height: 20px;
                            line-height: 20px;
                            color: #14191e;
                            font-size: 20px;
                            font-weight: 600;
                        }
                        span{
                            float: right;
                            font-size: 14px;
                            color: #8c9196;
                            line-height: 20px;
                            height: 20px;
                            cursor: pointer;
                        }
                    }
                    .card-list{
                        width: 100%;
                        ul,
                        li {
                            list-style-type: none;
                        }
                        li{
                            width: 25%;
                            box-sizing: border-box;
                            padding-right: 16px;
                            float: left;
                            .waepper{
                                width: 100%;
                                cursor: pointer;
                            }
                            .photo img{
                                width: 238px;
                                height: 142px;
                                border-radius: 4px;
                            }
                            h3{
                                color: #14191e;
                                font-size: 16px;
                                line-height: 16px;
                                font-weight: 600;
                                margin: 16px 0 12px;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                            .price{
                                color: #14191e;
                                p{
                                    height: 20px;
                                    i{
                                        height: 20px;
                                        line-height: 20px;
                                    }
                                    .yj{
                                        font-weight: 400;
                                        font-size: 12px;
                                        padding-right: 6px;
                                        text-decoration: line-through;
                                    }
                                }
                            }
                        }
                    }
                }
                .con2{
                    width: 100%;
                    height: 310px;  
                    // background: #0eccaa;
                    .type-one{
                        margin: 40px 0 20px;
                        h2{
                            height: 20px;
                            line-height: 20px;
                            color: #14191e;
                            font-size: 20px;
                            font-weight: 600;
                        }
                        span{
                            float: right;
                            font-size: 14px;
                            color: #8c9196;
                            line-height: 20px;
                            height: 20px;
                            cursor: pointer;
                        }
                    }
                    .card-list{
                        width: 100%;
                        display: flex;
                        .left{
                            width: 50%;
                            height: 100%;
                            overflow: hidden;
                            .list{
                                height: 274px;
                                .top{
                                padding: 0 16px 8px 0;
                                width: 50%;
                                height: 50%;
                                box-sizing: border-box;
                                float: left;
                                img{
                                    width: 240px; 
                                    height: 125px;  
                                }
                                .info{
                                    width: 100%;
                                    height: 20px;
                                    display: flex;
                                    justify-content: space-between;
                                    z-index: 89999;
                                    transform: translate(2px,-30px);
                                    .name{
                                        font-size: 14px;
                                        line-height: 20px;
                                        color: #fff;
                                        font-weight: 900;
                                    }
                                    .price{
                                        color: #fff;
                                        font-weight: 900;
                                        .yj{
                                            text-decoration: line-through;
                                            font-weight: 100;
                                            font-size: 12px;
                                        }
                                    }
                                }
                                }
                            }
                            
                        }
                        .right{
                            width: 50%;
                            height: 100%;
                            img{
                                width: 100%;
                                height: 270px;
                            }
                            .info{
                                    width: 100%;
                                    height: 20px;
                                    display: flex;
                                    justify-content: space-between;
                                    z-index: 89999;
                                    transform: translate(2px,-30px);
                                    .name{
                                        font-size: 18px;
                                        line-height: 20px;
                                        color: #fff;
                                        font-weight: 900;
                                    }
                                    .price{
                                        color: #fff;
                                        font-weight: 900;
                                        .yj{
                                            text-decoration: line-through;
                                            font-weight: 100;
                                            font-size: 14px;
                                        }
                                    }
                                }
                        }
                    }
                }
                .con3{
                    width: 100%;
                    height: 290px;  
                    // background: #5233ee; 
                    .type-one{
                        margin: 40px 0 20px;
                        h2{
                            height: 20px;
                            line-height: 20px;
                            color: #14191e;
                            font-size: 20px;
                            font-weight: 600;
                        }
                        span{
                            float: right;
                            font-size: 14px;
                            color: #8c9196;
                            line-height: 20px;
                            height: 20px;
                            cursor: pointer;
                        }
                        
                    }
                    .alwrapper{
                            // width: 300px;
                            // 
                            // 
                            width: 100%;
                            overflow: hidden;
                            ul,li{
                                list-style-type: none;
                            }
                            ul{
                                display: flex;
                                justify-content: space-between;              
                                li{
                                    width: 30%;
                                    float: left;
                                    // margin-right: 16px;
                                    box-sizing: border-box;
                                    cursor: pointer;
                                    // background: yellow;
                                    height: 250px;
                                    .inner{
                                        .banner{
                                            img{
                                                width: 100%;
                                                height: 100px;
                                            }
                                            .nr{
                                                text-align: center;
                                                position: absolute;
                                                top:860px;
                                                left:315px ;
                                                color: #fff;
                                                h3{
                                                    font-size: 14px;

                                                }
                                                p{
                                                    font-size: 10px;
                                                }
                                            }
                                        }
                                        .info{
                                            font-size: 12px;
                                            margin-top: 10px;
                                        }
                                        .uname{
                                            display: flex;
                                            justify-content: space-between;
                                            margin-top: 20px;
                                            position: absolute;
                                            top:1030px;
                                            .player{
                                                font-size: 12px;
                                            }
                                        }
                                    }
                                }
                            }

                        }
                }
                .con4{
                    width: 100%;
                    height: 290px;
                    // margin-top: 94px;
                    // background: #0eeeee;
                    padding-top: 20px;
                    .type-one{
                        margin: 40px 0 20px;
                        h2{
                            height: 20px;
                            line-height: 20px;
                            color: #14191e;
                            font-size: 20px;
                            font-weight: 600;
                        }
                        span{
                            float: right;
                            font-size: 14px;
                            color: #8c9196;
                            line-height: 20px;
                            height: 20px;
                            cursor: pointer;
                        }
                    }
                    .card-list{
                        width: 100%;
                        ul,
                        li {
                            list-style-type: none;
                        }
                        li{
                            width: 25%;
                            box-sizing: border-box;
                            padding-right: 16px;
                            float: left;
                            .waepper{
                                width: 100%;
                                cursor: pointer;
                            }
                            .photo img{
                                width: 238px;
                                height: 142px;
                                border-radius: 4px;
                            }
                            h3{
                                color: #14191e;
                                font-size: 16px;
                                line-height: 16px;
                                font-weight: 600;
                                margin: 16px 0 12px;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                            .price{
                                color: #14191e;
                                p{
                                    height: 20px;
                                    i{
                                        height: 20px;
                                        line-height: 20px;
                                    }
                                    .yj{
                                        font-weight: 400;
                                        font-size: 12px;
                                        padding-right: 6px;
                                        text-decoration: line-through;
                                    }
                                }
                            }
                        }
                    }
                }
                .con5{
                    width: 100%;        
                    height: 7145px; 
                    background: #03acca; 
                    nav{
                        width: 100%;
                        height: 60px;
                        .daohang{
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            // ul,li{
                            //     list-style-type: none;
                            // }
                            // ul{
                            //     display: flex;
                            //     li{
                            //         margin-right: 20px;
                            //         display: inline-block;
                            //         font-size: 16px;
                            //         font-weight: 300;
                            //         height: 100%;
                            //         line-height: 58px;
                            //         color: #8c9196;
                            //     }
                            // }
                        }
                        
                    }
                    .all{
                        width: 100%;
                        .gcon{
                            width: 100%;
                            height: 300px;
                            border: 1px solid #000;
                        }
                    }
                }
            }
        }


        footer{
            width: 100%;
            height: 340px;  
            background: #000;
            .container{
                width: 1000px;
                height: 100%;
                margin: auto;
                .left{
                    height: 108px;
                    float: left;
                    margin-right: 135px;
                    .biao{
                        display: flex;
                        a{
                        // display: inline-block;
                            margin-top: 95px;
                            height: 48px;
                            .logo{
                                width: 130px;
                                height: 48px;
                                display: flex;
                                img{
                                    width: 48px;
                                    height: 48px;
                                }
                                h1{
                                    width: 72px;
                                    height: 48px;
                                    margin-left: 10px;
                                    color: #fff ;
                                }
                                h1 p:nth-child(1){
                                    font-size: 24px;
                                }
                                h1 p:nth-child(2) {
                                    font-size: 12px;
                                }
                            }
                        }
                    
                        nav{
                            margin-left: 95px;
                            margin-top: 95px;
                            height: 48px;
                            padding-top: 12px;
                            box-sizing: border-box;
                            ul,
                            li {
                                list-style-type: none;
                            }
                            ul {
                                display: flex;
                                li {
                                    height: 25px;
                                    margin-right: 50px;
                                    line-height: 25px;
                                    a {
                                        color: #676b6e;
                                        font-weight: 900;
                                    }
                                }
                            }
                        }
                    }
                    .copy-right{
                        width: 100%;
                        margin-top: 25px;
                        .copy-right1{
                            font-size: 12px;
                            color: #8c9196;
                            line-height: 1;
                        }
                        .copy-right2{
                            font-size: 12px;
                            color: #8c9196;
                            line-height: 1;
                            margin-top: 8px;
                        }
                        .copy-right3{
                            font-size: 12px;
                            color: #8c9196;
                            line-height: 1;   
                            margin-top: 8px;
                        }
                    }
                }

                .download {
                    width: 184px;
                    height: 108px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .dbtn {
                        width: 184px;
                        height: 48px;
                        box-sizing: border-box;
                        padding: 10px 10px;
                        display: flex;
                        background: #fff;
                        border-radius: 4px;
                        margin-top: 95px;
                        .dlogo img {
                            width: 34px;
                            height: 34px;
                            margin-right: 8px;
                        }
                        .dinfo .stitle {
                            line-height: 14px;
                            color: #14191e;
                            font-size: 12px;
                        }
                        .dinfo .title {
                            line-height: 20px;
                            color: #14191e;
                            font-weight: 500;
                            font-size: 14px;
                            white-space: nowrap;
                        }
                    }
                    .download-acc{
                        margin-top: 0;
                    }
                }
            }









            
        }
}
.active{
    background: orange;
    color: #fff;
}


